<template>
  <div class="container">
    <!-- 商品评价详情 -->
    <ul class="tab"
        :style="{ opacity: tab_opacity + '' }">
      <li class="tab-item"
          v-for="(item, index) in tab_arr"
          :key="index">
        <div class="msg"
             :class="{ active: type == item.type }">
          {{ item.msg }}
        </div>
      </li>
    </ul>

    <div class="btns clearfix"
         v-if="scrollTop < 50">
      <div class="collect"
           @tap.stop="collect()">
        <img :src="iscollect==true?'https://h5.ameimeika.com/mp_images/mp_2.0/jifenshangcheng/shoucanghou@2x.png':'https://h5.ameimeika.com/mp_images/mp_2.0/jifenshangcheng/shoucang--huidi@2x.png'"
             class="image"
             mode="widthFix"
             srcset />
      </div>
      <button class="share"
              @tap="show_share()"></button>
    </div>
    <!-- 助力or抽奖 -->
    <div v-if="scrollTop < 50"
         class="help_chou">
      <button v-if="goods_data.activity_tag == 2 || goods_data.activity_tag == 1"
              @tap="cartBuysign(5)"
              class="userinfo-btnew"></button>
      <img v-if="goods_data.activity_tag == 2"
           src="https://h5.ameimeika.com/mp_images/mp_2.1/other/tag_details_help.png"
           class="img" />
      <img v-if="goods_data.activity_tag == 1"
           src="https://h5.ameimeika.com/mp_images/mp_2.1/other/tag_details_luck.png"
           class="img" />
    </div>
    <scroll-view :scroll-y="true"
                 :scroll-into-view="target"
                 :style="{ height: '100%' }"
                 @scroll="scroll">
      <!-- banner -->
      <div class="banner"
           id="banner">
        <swiper :indicator-dots="true"
                :autoplay="true"
                :interval="2000"
                :duration="500"
                indicator-color="rgba(255, 255,255,.5)"
                indicator-active-color="rgba(255, 255,255,1)">
          <block v-for="(item, index) in banners"
                 :key="index">
            <swiper-item>
              <img v-if="imgUrl && item"
                   :src="imgUrl + item"
                   class="slide-image"
                   @tap="tapBigImg(banners, index)" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <!-- 商品价格信息 -->
      <div class="goods-info"
           :class="{ 'goods-info_avtive': goods_data.is_activity }">
        <div class="plus"
             v-if="goods_data.plus_title &&goods_data.plus_title !=''&&!goods_data.is_activity">
          {{ goods_data.plus_title }}
          <div class="btn"
               v-if="goods_data.is_plus==1"
               @tap.stop="to_plus()">
            立即开卡
          </div>
          <div class="btn"
               v-if="goods_data.is_plus == 2">
            马上赚钱
            <button class="btn-share"
                    open-type="share"></button>
          </div>
        </div>
        <div class="price">
          <div class="rmb-group"
               :class="{ 'rmb-group_avtive': goods_data.is_activity }">
            <div class="icon">￥</div>
            <span class="_money"
                  v-if="goods_data.is_activity">{{
              goods_data.price
            }}</span>
            <span class="_money"
                  v-if="!goods_data.is_activity">{{
              goods_data.price
            }}</span>
            <div v-if="goods_data.deduction_credit && goods_data.is_activity"
                 class="icon icon-kou">
              +{{ goods_data.deduction_credit }}积分
            </div>
            <div v-if="goods_data.deduction_credit && !goods_data.is_activity"
                 class="icon icon-kou">
              +{{ goods_data.old_credit }}积分
            </div>
          </div>
          <!-- 去分销按钮 -->
          <div class="to_fx"
               @tap="show_torst()"
               v-if="goods_data.is_distribution">
            <img class="to_fx_img"
                 src="https://h5.ameimeika.com/mp_images/mp_2.0/jifenshangcheng/juxing@2x.png" />
          </div>
        </div>
        <div v-if="goods_data.is_activity == true"
             class="old-price clearfix">
          <div class="old">原价￥ {{ goods_data.origin_price }}</div>
          <div class="sales">销量：{{ goods_data.sales_num }}</div>
        </div>
        <div v-else
             class="old-price1 clearfix">
          <div class="old">原价￥ {{ goods_data.origin_price }}</div>
          <div class="sales">销量：{{ goods_data.sales_num }}</div>
        </div>
        <div v-if="goods_data.is_activity == true"
             class="djs_content">
          <p class="djs_content_title">{{ djs_type }}</p>
          <p class="djs_content_con">
            <span class="bord"
                  v-if="minutes[0] !== '00'">{{
              minutes[0]
            }}</span>
            <span v-if="minutes[0] !== '00'"
                  class="time_style">天</span>
            <span class="bord">{{ minutes[1] }}</span>
            <span class="time_style">:</span>
            <span class="bord">{{ minutes[2] }}</span>
            <span class="time_style">:</span>
            <span class="bord">{{ minutes[3] }}</span>
          </p>
        </div>
      </div>
      <div class="goods-name">
        <div class="cross-border"
             v-if="goods_data.cross_border == 1">
          <div class="box">
            <div class="msg">
              跨境
            </div>
          </div>
        </div>
        {{ goods_data.title }}
      </div>
      <div class="goods-description">{{ goods_data.descript }}</div>
      <!-- 标签列表 -->
      <div class="label clearfix"
           v-if="goods_data.serve">
        <ul class="label_list clearfix">
          <li v-for="(item, k) in goods_data.serve"
              :key="k"
              class="label_item">
            <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/gouxuan@2x.png"
                 class="img"
                 mode="widthFix" />
            {{ item }}
          </li>
        </ul>
      </div>
      <!-- 促销条区 -->
      <div class="cxtq"
           v-if="promotions != null"
           @tap="to_cuxiao()">
        <img v-if="imgUrl && promotions.image"
             class="cxtq_img"
             :src="imgUrl + promotions.image" />
      </div>
      <!-- 选择规格 -->
      <div class="specification clearfix">
        <div class="tip">商品规格</div>
        <div class="selection"
             v-text="mall_text"></div>
        <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
             mode="widthFix"
             class="icon" />
        <button @tap="cartBuysign(1)"
                class="right right1 shop-style"></button>
      </div>
      <!-- 优惠券列表 -->
      <div class="specification clearfix"
           v-if="ticket[0]"
           @tap="chech_ticket()">
        <div class="tips">券</div>
        <div class="selections">{{ ticket.length }}张可使用</div>
        <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/xiayibu@2x.png"
             mode="widthFix"
             class="icon" />
      </div>
      <!-- 评论 -->
      <ul class="evaluation"
          id="evaluation">
        <div class="header clearfix">
          <div class="left">评价（{{ total_evaluat }}）</div>
          <div class="right"
               @tap="eva_detail()">
            全部评价
            <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/chakanquanbu@2x.png"
                 mode="widthFix"
                 class="icon" />
          </div>
        </div>

        <evaluat :evaluat_list="evaluatList"></evaluat>
      </ul>
      <!-- 详情 -->
      <div class="goods-detail"
           id="goods_detail">
        <div class="header clearfix">
          <div class="left">上滑查看图文详情</div>
        </div>
        <!-- <rich-text v-html="rich_text"></rich-text> -->
        <div class="imgsbox">
          <img class="imgs"
               v-for="(item, index) in goods_data2"
               mode="widthFix"
               :key="index"
               :src="item" />
        </div>
      </div>
    </scroll-view>
    <!-- 规格选择 -->
    <div class="mask"
         v-if="isShows == 2">
      <div class="mallbox">
        <div class="mall_box">
          <div class="title">
            <span class="close"
                  @tap.stop="closeMask">×</span>
          </div>
          <div class="mallInfo">
            <img v-if="imgUrl && goods_data.images"
                 :src="imgUrl + goods_data.images"
                 alt
                 class="mallImg"
                 @tap="image_preview(pic_arr, courent_img)" />
            <div class="right">
              <!-- 纯现金 -->
              <div class="mall_row1">
                <span class="money_cent">￥</span>
                <span class="monty">{{ goods_data.price }}</span>
                <span v-if="deduction_credit > 0"
                      class="money_cent">积分可抵￥{{ deduction_credit }}</span>
              </div>
              <div class="mall_row2">{{ "￥" + goods_data.origin_price }}</div>
              <div class="mall_row4"
                   :class="{ none_count: stock <= 0 }">
                {{ "库存" + stock + "件" }}
              </div>
              <div class="mall_row3"
                   v-text="mall_text"></div>
            </div>
          </div>
          <scroll-view :scroll-y="true"
                       :style="{ height: '200px' }">
            <div class="dv"
                 v-for="(val, n) in mallData"
                 :key="n">
              <p class="mall_choose">{{ mall_title_array[n] }}</p>
              <ul class="mall_type clearfix">
                <li class="mall_style"
                    v-for="(value, index) in val"
                    :key="index"
                    @tap="chooseStyle(value, index, value.isShow, n, val)"
                    :class="[
                    value.isShow ? 'coloring' : '',
                    subIndex[n] == index ? 'active' : ''
                  ]">
                  {{ value.key }}
                </li>
              </ul>
            </div>
          </scroll-view>
          <div class="choose">
            数量
            <span v-if="goods_data.sales_count > 0">（限购{{ goods_data.sales_count }}件）</span>
            <div class="num">
              <span class="numBtn"
                    :class="{ num_mids: good_num <= 1 }"
                    @tap="count(-1)">-</span>
              <input type="number"
                     class="num_mid"
                     v-model="good_num" />
              <span class="numBtn"
                    @tap="count(1, goods_data.sales_count)">+</span>
            </div>
          </div>
        </div>
        <div v-if="stock > 0 || is_stock"
             @tap="buy_or_add()"
             class="comfirmBtn">
          确定
        </div>
        <div v-else
             class="comfirmBtns">确定</div>
      </div>
    </div>
    <!-- 优惠券选择 -->
    <div class="mask"
         v-if="ticket_isShows">
      <div class="mallbox">
        <div class="mall_box mall_boxs">
          <div class="titles">
            <p class="title_t">可领取优惠券</p>
            <p class="close"
               @tap.stop="closeMask">×</p>
          </div>
          <scroll-view :scroll-y="true"
                       :style="{ height: '276px' }">
            <ul class="list">
              <li class="list-item"
                  v-for="(item, index) in ticket"
                  :key="index">
                <div class="detail clearfix">
                  <div class="left">
                    <div class="price">￥{{ item.type_money }}</div>
                    <p class="tip">{{ item.type_name }}</p>
                  </div>
                  <div class="right clearfix">
                    <div class="name">
                      <div class="type">现金券</div>
                      <div class="ticket-name">{{ item.source }}</div>
                    </div>
                    <div class="descript">
                      <div>
                        可在
                        <span class="tip">{{ item.con }}</span>中使用
                      </div>
                    </div>
                    <div class="data">{{ item.start }}-{{ item.end }}</div>
                  </div>
                </div>
                <div class="status"
                     @tap="get_ticket(item)">
                  <ul class="icon clearfix">
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                    <li class="circle"></li>
                  </ul>
                  <div class="use"
                       v-if="item.tickets_is_set == false">
                    立即领取
                  </div>
                  <div class="use"
                       v-if="item.tickets_is_set == true">
                    <img src="https://h5.ameimeika.com/mp_images/mp_2.0/pinzhiyimei/youchou@2x.png"
                         class="iconss" />
                  </div>
                </div>
              </li>
            </ul>
            <div class="zhanwei"></div>
          </scroll-view>
        </div>
      </div>
    </div>
    <!-- 去首页 -->
    <!-- <img
      v-if="!sid"
      @tap="go_home"
      src="https://h5.ameimeika.com/mp_images/mp_2.1/other/icon_share_gohome.png"
      class="go_home"
    >-->
    <!-- 底部 -->
    <div class="btn-group"
         v-if="isShows == 1">
      <div class="left">
        <div class="call">
          <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/kefu@2x.png"
               mode="widthFix"
               class="image" />
          <div class="msg">咨询</div>
          <button class="contact"
                  @tap="to_service()"></button>
        </div>
        <div class="shop-car">
          <img src="https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/gouwuche@2x.png"
               mode="widthFix"
               class="image" />
          <div class="msg">购物车</div>
          <span v-if="mall_num > 0"
                class="mall_num">{{ mall_num }}</span>
          <button @tap="cartBuysign(2)"
                  class="userinfo-btn"></button>
        </div>
        <div class="shop-car">
          <img src="https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/system-share.png"
               mode="widthFix"
               class="image" />
          <div class="msg">分享</div>
          <button @tap.stop="show_share()"
                  class="userinfo-btn"></button>
        </div>
      </div>
      <button @tap="cartBuysign(3)"
              class="right">加入购物车</button>
      <button @tap="cartBuysign(4)"
              class="right right1">立即购买</button>
    </div>
    <!-- 分享 -->
    <div class="share-mask clearfix"
         v-if="show_postermask"
         @tap.stop="close_share()">
      <img :src="base_url+'/mp_3.0.2/share_top.png'"
           v-if="base_url"
           mode="widthFix"
           alt=""
           class="share-top">
      <div class="share-model"
           @tap="save_poster">
        <img :src="poster_url"
             v-if="poster_url&&poster_url!=''"
             @tap.stop="()=>{false}"
             @longtap.stop="save_poster(poster_url)"
             mode="widthFix"
             alt=""
             class="poster">
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
import evaluat from "@/components/evaluation/evaluation";
import "@/assets/js/timeFormat.js";
let time1, time2;
export default {
  data () {
    return {
      show_canvas: false,
      banners: [],
      imgUrl: common.image_response,
      base_url: common.image_resource,
      evaluatList: [],
      goods_id: 0,
      goods_data: {},
      ticket: [],
      total_evaluat: 0,
      tab_arr: [
        { type: 1, msg: "商品" },
        { type: 3, msg: "详情" },
        { type: 2, msg: "评价" }
      ],
      type: 1, // 1 商品 详情 评价
      tab_opacity: 0,
      target: "",
      iscollect: false,
      mall_num: "", //购物车角标
      isShows: 1, //弹窗显示隐藏
      ticket_isShows: false, //优惠券弹框
      mallData: "", //总规格数（颜色，尺寸，种类）
      mall_style: "", //规格选择（颜色选择）
      mall_title_array: [],
      good_num: 1, //计数器数量
      mall_style_array: "", //规格价格
      good_spec_price_id: -1,
      mall_img: "",
      style_arr: [],
      mall_text: "请选择",
      str: "",
      arr_length: "",
      arr_arr: [],
      mark: true,
      mark1: true,
      mark2: true,
      goods_data2: [],
      date_time: "",
      start_time: "",
      end_time: "",
      minutes: ["00", "00", "00", "00"],
      time1: "",
      djs_type: "",
      active_shop: false,
      promotions: "",
      shop_sign: false,
      cart_Buy_sign: 0,
      rich_text: "",
      scrollTop: 0,
      b_show: false,
      user_id: 0,
      deduction_credit: 0,
      sid: 0,
      pic_arr: [], //规格图片数组
      courent_img: 0, //当前查看图片
      stock: -1,
      is_stock: true,
      allData: [], //所有可选规格
      selectArr: [], //存放被选中的id
      selectName: [], //存放被选中的值
      shopItemInfo: {}, //存放要和选中的值进行匹配的数据
      subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
      cha_timestamp: "",
      poster_url: "",
      show_postermask: false
    };
  },
  components: {
    evaluat
  },
  onLoad (options) {
    Object.assign(this.$data, this.$options.data());
    this.sid = wx.getStorageSync("user_id");
    this.user_id = wx.getStorageSync("user_id") || 0;
    //识别小程序码中的参数
    if (options.scene) {
      let url_data = decodeURIComponent(options.scene),
        obj = {};
      url_data.split("&").forEach(item => {
        obj[item.split("=")[0]] = item.split("=")[1];
      });
      this.sid = obj.sid;
      this.goods_id = obj.tg;
    }
    //获取url上的商品id
    if (options.goods_id) {
      this.goods_id = options.goods_id;
    }
    this.isShows = 1;
    this.mall_text = "请选择规格";
    this.str = "";
    this.style_arr = [];
    this.good_spec_price_id = "";
    this.good_num = 1;
    this.arr_arr = [];
    this.get_goods_data();
    // this.getMallBox();
    clearInterval(this.time1);
  },
  onHide () {
    clearInterval(time1);
    clearInterval(time2);
  },
  onReady () {
    // this.djs();
  },
  onShow () {
    this.minutes = "";
    this.sid = wx.getStorageSync("user_id");
    this.shop_sign = false;
    clearInterval(time1);
    clearInterval(time2);
    this.GetRTime();
    this.get_poster()
    // this.djs();
  },
  onUnload () {
    let that = this;
    clearInterval(time1);
    clearInterval(time2);
    that.minutes = "";
  },
  onShareAppMessage () {
    return {
      title: this.goods_data.title,
      path: "/pages/package_main/entry/main?tg=" + this.goods_id + "&t=3&sid=" + this.sid,
      imageUrl: `${this.imgUrl}${this.goods_data.images}`,
      success: res => {
        wx.showToast({
          title: "分享成功", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      },
      fail: () => {
        wx.showToast({
          title: "分享未成功", //提示的内容,
          icon: "none", //图标,
          duration: 2000, //延迟时间,
          mask: false //显示透明蒙层，防止触摸穿透,
        });
      },
      complete: () => { }
    };
  },
  methods: {
    to_service () {
      common.to_service()
    },
    //去分销按钮提示
    show_torst () {
      common.mmk_Loading(
        2,
        "推荐购买后将获得奖励约0~" + this.goods_data.distribution_money + "元",
        3000
      );
    },
    //去首页
    go_home () {
      wx.switchTab({ url: '/pages/index/main' });
    },
    //图片预览
    image_preview (item, index) {
      wx.previewImage({
        current: item[index], // 当前显示图片的http链接
        urls: item // 需要预览的图片http链接列表
      });
    },
    //轮播图预览
    tapBigImg (banners, index) {
      common.tapBigImg(banners, index);
    },
    //促销条区跳转
    to_cuxiao () {
      common.to_detail(this.promotions);
    },
    //领取优惠券
    get_ticket (e) {
      common.fly_post(
        "api/v4_2/user_tickets/get_ticket",
        { id: e.id },
        response => {
          if (response.data.status_code == 0) {
            common.mmk_Loading(2, "领取成功");
          } else {
            common.mmk_Loading(2, response.data.message);
          }
          setTimeout(() => {
            this.relaunch_data();
          }, 200);
        }
      );
    },
    //商品详情
    get_goods_data () {
      //   common.mmk_Loading(0);
      let that = this;
      common.fly_post(
        "api/v4_2/shop_goods/show",
        {
          user_id: that.user_id,
          id: that.goods_id,
          promotions: 1
        },
        response => {
          let res = response.data;
          that.getMallBox();
          //   common.mmk_Loading(1);
          if (res.status_code == 0) {
            this.promotions = res.data.promotions; //促销条
            if (res.data.title) {
              wx.setNavigationBarTitle({
                title: res.data.title
              });
            }
            if (res.data.is_activity == true) {
              //倒计时
              this.active_shop = true;
              this.date_time = res.data.date_time - 0; //转换数据类型
              this.start_time = res.data.start_time - 0;
              this.end_time = res.data.end_time - 0;
              let now_time = Date.parse(new Date()) / 1000;
              this.GetRTime();
            }
            //商品详情rich-text
            let reg = /http:\/\/.*?(png|jpg|jpeg)/gi;
            this.rich_text = res.data.content.split("<p><img")[0];
            this.goods_data2 = res.data.content.match(reg);
            this.goods_data = res.data;
            this.stock = res.data.stock;
            wx.setStorage({ key: "stock", data: res.data.stock });
            wx.setStorage({ key: "goods_data", data: res.data });
            this.pic_arr.unshift(this.imgUrl + this.goods_data.images);
            this.deduction_credit = res.data.deduction_credit;
            wx.setStorage({
              key: "deduction_credit",
              data: res.data.deduction_credit
            });
            wx.setStorage({ key: "com_good_id", data: res.data.id });
            this.banners = this.goods_data.banner.split(",");
            //优惠券
            let ticket = this.goods_data.ticket;
            ticket.forEach(element => {
              element.start = new Date(element.start_ticket_time * 1000).Format(
                "yyyy.MM.dd"
              );
              element.end = new Date(element.end_ticket_time * 1000).Format(
                "yyyy.MM.dd"
              );
              let condtion = element.condtion;
              if (condtion == 1) {
                element.con = "品质医美 ";
              } else if (condtion == 2) {
                element.con = "积分商城 ";
              }
            });
            this.ticket = ticket;
            this.iscollect = this.goods_data.collect;
            this.mall_num = res.data.count_shop;
            this.mall_img = this.imgUrl + res.data.images; //弹窗商品照片
            this.get_evaluation();
          } else {
            common.mmk_Loading(2, res.message);
            setTimeout(() => {
              wx.switchTab({ url: '/pages/index/main' });
            }, 1500);
          }
        }
      );
    },
    //领取优惠券后重载数据
    relaunch_data () {
      let that = this;
      common.fly_post(
        "api/v4_2/shop_goods/show",
        {
          user_id: that.user_id,
          id: that.goods_id
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            let ticket = res.data.ticket;
            ticket.forEach(element => {
              element.start = new Date(element.start_ticket_time * 1000).Format(
                "yyyy.MM.dd"
              );
              element.end = new Date(element.end_ticket_time * 1000).Format(
                "yyyy.MM.dd"
              );
              let condtion = element.condtion;
              if (condtion == 1) {
                element.con = "品质医美 ";
              } else if (condtion == 2) {
                element.con = "积分商城 ";
              }
            });
            that.ticket = ticket;
          }
        }
      );
    },
    //倒计时
    djs () {
      let that = this;
      that.time1 = setInterval(() => {
        that.GetRTime();
      }, 1000);
    },
    // 距离开始倒计时
    comming_soon_timer () {
      let cha_timestamp,
        that = this;
      clearInterval(time1);
      clearInterval(time2);
      time1 = setInterval(() => {
        let now_time = Date.parse(new Date()) / 1000;
        if (that.start_time - now_time > 0) {
          //   距离开始倒计时
          cha_timestamp = that.start_time - now_time;
          that.djs_type = "开抢倒计时";
        } else {
          clearInterval(this.time1);
          that.get_goods_data();
        }
        let sy_day = parseInt(cha_timestamp / (3600 * 24));
        if (sy_day < 10) {
          sy_day = "0" + sy_day;
        }
        let sy_hour = parseInt((cha_timestamp - sy_day * 3600 * 24) / 3600);
        if (sy_hour < 10) {
          sy_hour = "0" + sy_hour;
        }
        let sy_min = parseInt(
          (cha_timestamp - sy_hour * 3600 - sy_day * 24 * 3600) / 60
        );
        if (sy_min < 10) {
          sy_min = "0" + sy_min;
        }
        let sy_miao =
          cha_timestamp - sy_day * 3600 * 24 - sy_hour * 3600 - sy_min * 60;
        if (sy_miao < 10) {
          sy_miao = "0" + sy_miao;
        }
        that.minutes = [sy_day, sy_hour, sy_min, sy_miao];
      }, 1000);
    },
    // 距离结束倒计时
    ending_soon_timer () {
      let cha_timestamp,
        that = this;
      clearInterval(time1);
      clearInterval(time2);
      time2 = setInterval(() => {
        let now_time = Date.parse(new Date()) / 1000;
        if (that.end_time - now_time > 0) {
          cha_timestamp = that.end_time - now_time;
          that.djs_type = "距结束倒计时";
        } else {
          that.goods_data.is_activity = false;

          clearInterval(that.time1);
        }
        let sy_day = parseInt(cha_timestamp / (3600 * 24));
        if (sy_day < 10) {
          sy_day = "0" + sy_day;
        }
        let sy_hour = parseInt((cha_timestamp - sy_day * 3600 * 24) / 3600);
        if (sy_hour < 10) {
          sy_hour = "0" + sy_hour;
        }
        let sy_min = parseInt(
          (cha_timestamp - sy_hour * 3600 - sy_day * 24 * 3600) / 60
        );
        if (sy_min < 10) {
          sy_min = "0" + sy_min;
        }
        let sy_miao =
          cha_timestamp - sy_day * 3600 * 24 - sy_hour * 3600 - sy_min * 60;
        if (sy_miao < 10) {
          sy_miao = "0" + sy_miao;
        }
        that.minutes = [sy_day, sy_hour, sy_min, sy_miao];
      }, 1000);
    },
    //倒计时前获取时间
    GetRTime () {
      let that = this,
        cha_timestamp;
      let now_time = Date.parse(new Date()) / 1000;
      if (that.start_time - now_time > 0) {
        //   距离开始倒计时
        this.comming_soon_timer();
        cha_timestamp = that.start_time - now_time;
        that.djs_type = "开抢倒计时";
      } else if (that.end_time - now_time > 0) {
        this.ending_soon_timer();
        cha_timestamp = that.end_time - now_time;
        that.djs_type = "距结束倒计时";
      } else {
        that.goods_data.is_activity = false;
        clearInterval(that.time1);
      }
      let sy_day = parseInt(cha_timestamp / (3600 * 24));
      if (sy_day < 10) {
        sy_day = "0" + sy_day;
      }
      let sy_hour = parseInt((cha_timestamp - sy_day * 3600 * 24) / 3600);
      if (sy_hour < 10) {
        sy_hour = "0" + sy_hour;
      }
      let sy_min = parseInt(
        (cha_timestamp - sy_hour * 3600 - sy_day * 24 * 3600) / 60
      );
      if (sy_min < 10) {
        sy_min = "0" + sy_min;
      }
      let sy_miao =
        cha_timestamp - sy_day * 3600 * 24 - sy_hour * 3600 - sy_min * 60;
      if (sy_miao < 10) {
        sy_miao = "0" + sy_miao;
      }
      that.minutes = [sy_day, sy_hour, sy_min, sy_miao];
    },
    //评论
    get_evaluation () {
      common.fly_post(
        "api/v4_2/shop_good_comment/list",
        {
          good_id: this.goods_id,
          type: false,
          page: 1,
          pageSize: 2,
          user_id: this.user_id
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            res.data.data.forEach(element => {
              element.time = new Date(element.time * 1000).Format(
                "yyyy-MM-dd hh:mm"
              );
              if (element.images) {
                element.image_arr = element.images;
                element.total_image = element.image_arr.length;
              } else {
                element.image_arr = [];
                element.total_image = element.image_arr.length;
              }
            });
            this.evaluatList = res.data.data;
            this.total_evaluat = res.data.total;
          } else {
            common.mmk_Loading(2, res.message, 2000);
          }
        }
      );
    },
    scroll (e) {
      this.scrollTop = e.mp.detail.scrollTop;
      this.tab_opacity = this.scrollTop / 400;
      if (this.scrollTop < 500) {
        this.type = 1;
      } else if (500 < this.scrollTop && this.scrollTop < 1200) {
        this.type = 2;
      } else if (this.scrollTop > 1200) {
        this.type = 3;
      }
    },
    //收藏
    collect () {
      let that = this;
      common.fly_post(
        "api/v4_2/beauty_project/collect",
        {
          type: 2,
          shop_id: this.goods_id
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            switch (this.iscollect) {
              case false:
                common.mmk_Loading(2, "收藏成功", 2000);
                break;
              default:
                common.mmk_Loading(2, "取消收藏", 2000);
                break;
            }
            this.iscollect = !this.iscollect;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    //弹窗数据
    getMallBox () {
      let activity = this.goods_data.is_activity;
      if (activity == true) {
        activity = 2;
      } else {
        activity = 1;
      }
      common.fly_post(
        "api/v4_2/shop_goods/item_index",
        {
          goods_id: this.goods_id,
          type: activity
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            this.mallData = res.data;
            let arr = [];
            this.mallData.forEach((element, index) => {
              this.mall_style = element;
              element.index = index;
              this.mall_style.forEach(val => {
                arr.push(val.spec_name); //类型标题
                val.active = false; //注册
              });
            });
            this.mall_title_array = arr.filter(function (el, index, self) {
              return self.indexOf(el) == index;
            });
            this.arr_length = res.data.length;
          } else {
            common.mmk_Loading(2, res.message, 2000, true);
          }
        }
      );
      common.fly_post(
        "api/v4_2/shop_goods/item_price",
        {
          goods_id: this.goods_id,
          type: activity
        },
        response => {
          let res = response.data;
          if (res.status_code == 0) {
            this.mall_style_array = res.data;
            res.data.forEach(item => {
              this.pic_arr.push(this.imgUrl + item.images);
            });

            this.allData = [...res.data]; //所有可选择规格
            for (var i in this.allData) {
              this.shopItemInfo[this.allData[i].spec_id_item] = this.allData[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
            }

            this.checkItem();
          } else {
            common.mmk_Loading(2, res.message, 2000, true);
          }
        }
      );
    },
    //加入购物车，立即购买，购物车判断标记
    cartBuysign (e) {
      let that = this;
      if (wx.getStorageSync("user_token")) {
        this.ticket_isShows = false;
        this.cart_Buy_sign = e;
        if (that.cart_Buy_sign == 2) {
          //购物车
          wx.navigateTo({
            url: "/pages/package_mall/shop_cart/main"
          });
        } else if (that.cart_Buy_sign == 5) {
          wx.navigateTo({
            url: "/pages/promotion_unit/main"
          });
        } else {
          that.isShows = 2;
        }
      } else {
        wx.navigateTo({ url: "/pages/package_main/login/main" });
      }
    },
    //选择优惠券
    chech_ticket () {
      this.ticket_isShows = true;
    },
    //关闭弹窗
    closeMask () {
      this.str = "";
      // this.good_spec_price_id = "";
      this.good_num = 1;
      this.style_arr = [];
      this.arr_arr = [];
      this.mark = true;
      this.mark1 = true;
      this.mark2 = true;
      this.mallData.forEach(val => {
        val.forEach(e => {
          e.active = false;
        });
      });
      this.isShows = 1;
      this.ticket_isShows = false;
    },
    //计数器
    count (params, num) {
      if (params > 0) {
        if (num > 0) {
          if (this.good_num < num && this.good_num < this.stock) {
            this.good_num++;
          } else {
            if (num < this.stock) {
              common.mmk_Loading(
                2,
                "商品限购" + this.goods_data.sales_count + "件哦~",
                2000
              );
            } else {
              common.mmk_Loading(2, "库存不足", 2000);
            }
          }
        } else {
          if (this.good_num < this.stock) {
            this.good_num++;
          } else {
            common.mmk_Loading(2, "库存不足", 2000);
          }
        }
      } else {
        if (this.good_num > 1) {
          this.good_num--;
        }
      }
    },
    //选择样式
    chooseStyle (e, index, canClick, n, params) {
      this.good_num = 1;
      if (canClick) {
        //如果已置灰，规格不可点击
        return;
      }
      if (this.selectArr[n] != e.id) {
        //如果没有选择过就放进来
        this.selectArr[n] = e.id;
        this.subIndex[n] = index; //添加选中的数组下标
        this.selectName[n] = e;
      } else {
        this.selectArr[n] = "";
        this.selectName[n] = "";
        this.subIndex[n] = -1; //去掉选中的颜色

        this.selectName[n] = "";
        this.goods_data = wx.getStorageSync("goods_data");
        this.stock = wx.getStorageSync("stock");
        this.deduction_credit = wx.getStorageSync("deduction_credit");
        this.mall_text = "请选择规格";
        this.good_num = 1;
        this.good_spec_price_id = "";
      }
      this.checkItem();
    },
    checkItem: function () {
      let option = [...this.mallData]; //接收规格类
      let result = []; //定义数组存储被选中的id
      let resultName = []; //定义数组存储被选中的值
      for (let i in option) {
        result[i] = this.selectArr[i] ? this.selectArr[i] : "";
        resultName[i] = this.selectName[i] ? this.selectName[i] : "";
      }
      for (let i in option) {
        var last = result[i]; //把选中的值存放到字符串last去
        let option_i = [...option[i]];
        for (let k in option_i) {
          result[i] = option[i][k].id; //赋值，存在直接覆盖，不存在往里面添加id值
          option[i][k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
        }
        result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
      }
      if (resultName) {
        switch (this.selectName.length) {
          case 1:
            this.arr_arr[0] =
              this.selectName[0] != undefined ? this.selectName[0].id : "";
            break;
          case 2:
            this.arr_arr[0] =
              this.selectName[0] != undefined ? this.selectName[0].id : "";
            this.arr_arr[1] =
              this.selectName[1] != undefined ? this.selectName[1].id : "";
            break;
          case 3:
            this.arr_arr[0] =
              this.selectName[0] != undefined ? this.selectName[0].id : "";
            this.arr_arr[1] =
              this.selectName[1] != undefined ? this.selectName[1].id : "";
            this.arr_arr[2] =
              this.selectName[2] != undefined ? this.selectName[2].id : "";
            break;
        }
        this.str = this.arr_arr.join("_");
        if (this.selectName.length == this.mall_title_array.length) {
          //根据组合的规格id匹配此规格的数据，价格，名称等
          this.mall_style_array.forEach((element, ins) => {
            if (this.str == element.spec_id_item) {
              if (element.stock > 0) {
                // this.good_num = 1;
                if (this.good_num > element.stock) {
                  this.good_num = element.stock;
                } else {
                  this.good_num = this.good_num;
                }
              } else {
                this.good_num = 0;
              }
              // this.is_stock = false;
              if (element.images) {
                this.goods_data.images = element.images;
                this.courent_img = ins + 1;
              } else {
                this.courent_img = 0;
              }
              this.goods_data.price = element.price;
              this.goods_data.origin_price = element.origin_price;
              this.goods_data.credit = element.credit;
              this.stock = element.stock;
              this.good_spec_price_id = element.id;
              this.mall_text = "已选：" + element.spec_id_item_name;
              this.deduction_credit = element.deduction_credit;
            }
          });
        }
      }
      this.$forceUpdate(); //重绘
    },
    isMay: function (result) {
      for (let i in result) {
        if (result[i] == "") {
          return false; //如果数组里有为空的值，那直接返回true
        }
      }
      result = result.join("_");
      return this.shopItemInfo[result].stock == 0 ? true : false; //匹配选中的数据的库存，若库存为0返回true置灰,否则返回false恢复可点击
    },
    //加入购物车
    submitCart () {
      let activity = this.goods_data.is_activity;
      if (activity == true) {
        activity = 2;
      } else {
        activity = 1;
      }
      if (this.good_spec_price_id >= 0 && this.good_spec_price_id != "") {
        let obj = {
          good_spec_price_id: this.good_spec_price_id,
          goods_id: this.goods_id,
          num: this.good_num,
          goods_type: activity
        };
        common.fly_post("api/v4_2/shop_cards/create", obj, response => {
          let res = response.data;
          if (res.status_code == 0) {
            this.mall_num = res.data.count;
            common.mmk_Loading(2, "加入购物车成功", 2000);
            this.closeMask();
          } else {
            common.mmk_Loading(2, res.message, 2000, true);
          }
        });
      } else {
        common.mmk_Loading(2, "请选择规格", 2000, true);
      }
    },
    //加入购物车 or 立即购买
    buy_or_add () {
      if (this.cart_Buy_sign == 1 || this.cart_Buy_sign == 3) {
        this.submitCart();
      } else if (this.cart_Buy_sign == 4) {
        this.fast_buy();
      }
    },
    //立即购买
    fast_buy () {
      if (this.good_spec_price_id >= 0 && this.good_spec_price_id != "") {
        this.comfirmOrder();
      } else {
        common.mmk_Loading(2, "请选择规格", 2000);
      }
    },
    //立即购买检测商品是否可买
    comfirmOrder () {
      let that = this;
      common.fly_post(
        "api/v4_2/shop_order/place",
        {
          goods_id: that.goods_id,
          good_spec_price_id: that.good_spec_price_id,
          num: that.good_num
        },
        response => {
          let res = response.data;
          that.isShows = 1;
          if (res.status_code == 0) {
            wx.navigateTo({
              url: `/pages/package_mall/confirm_order/main?sign=4&goods_id=${that.goods_id}&good_spec_price_id=${that.good_spec_price_id}&num=${that.good_num}`
            });
          } else {
            common.mmk_Loading(2, res.message, 2000, true);
          }
        }
      );
    },
    // 跳转plus
    to_plus () {
      wx.switchTab({ url: "/pages/plus/main" });
    },
    // 展示分享
    show_share () {
      this.show_postermask = true
    },
    close_share () {
      this.show_postermask = false
    },
    //  保存海报
    save_poster (img_url) {
      wx.downloadFile({
        url: img_url,     //仅为示例，并非真实的资源
        success: function (res) {
          // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
          if (res.statusCode === 200) {
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success (res) {
                wx.showToast({
                  title: '图片保存成功', //提示的内容,
                  icon: 'success', //图标,
                  duration: 2000, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => { }
                });
              },
              fail (res) {
                wx.showToast({
                  title: '图片保存失败', //提示的内容,
                  icon: 'none', //图标,
                  duration: 2000, //延迟时间,
                  mask: true, //显示透明蒙层，防止触摸穿透,
                  success: res => { }
                });
              }
            })
          }
        }
      })
    },
    //   获取海报
    get_poster () {
      wx.showLoading({
        title: "", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      common.fly_post(
        "api/v4_2/image/share_qrcode",
        {
          type: 3,
          item_id: this.goods_id,
          user_id: wx.getStorageSync("user_id") || 0
        },
        response => {
          wx.hideLoading();
          let res = response.data;
          if (res.status_code == 0) {
            this.poster_url = res.data.qrcode;
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 评论列表
    eva_detail () {
      if (this.total_evaluat > 0) {
        wx.navigateTo({ url: '/pages/package_mall/evaluation_list/main?goods_name=' + this.goods_data.title + '&goods_id=' + this.goods_data.id });
      }

    }
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: rgba(251, 251, 251, 1);
  .tab {
    width: 100%;
    height: 45px;
    line-height: 45px;
    display: flex;
    background-color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 1px 6px 1px rgba(0, 0, 0, 0.06);
    z-index: 9999;
    .tab-item {
      flex: 1;
      font-size: 14px;
      font-family: "Regular";
      .msg {
        display: inline-block;
        font-size: 14px;
        font-family: "Regular";
        text-align: center;
        color: rgba(68, 68, 68, 1);
      }
      .active {
        color: rgba(246, 70, 101, 1);
        position: relative;
        &::before {
          content: "";
          width: 100%;
          height: 2px;
          background: rgba(246, 70, 101, 1);
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      &:nth-of-type(1) {
        .msg {
          float: right;
          margin-right: 30px;
        }
      }
      &:nth-of-type(2) {
        position: relative;
        .msg {
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      &:nth-of-type(3) {
        .msg {
          float: left;
          margin-left: 30px;
        }
      }
    }
  }
  /* 收藏样式 */
  .btns {
    width: auto;
    height: 32px;
    display: flex;
    position: absolute;
    top: 0;
    right: 1%;
    margin-top: 15px;
    z-index: 10000;
    .collect {
      display: block;
      .image {
        width: 32px;
        height: 32px;
        display: inline-block;
      }
    }
    .share {
      display: block;
      width: 32px;
      height: 32px;
      text-align: center;
      background: url("https://h5.ameimeika.com/mp_images/jifenshangcheng/xiangqingye/fenxiang@2x.png")
        no-repeat center;
      background-size: cover;
      margin: 0 15px 0 10px;
      outline: none;
      border: none;
    }
    .share::after {
      border: none;
    }
  }

  .b_show {
    opacity: 0;
  }
  .help_chou {
    position: absolute;
    right: 0;
    top: 90px;
    width: 95px;
    height: 46px;
    z-index: 999999;
    .userinfo-btnew {
      border: solid 1px red;
      width: 95px;
      height: 46px;
      position: relative;
      top: 46px;
      opacity: 0;
    }
    .img {
      width: 95px;
      height: 46px;
    }
  }
  // banner
  .banner {
    height: 375px;
    width: 100%;
    position: relative;
    swiper {
      height: 100%;
    }
    .slide-image {
      width: 100%;
      height: 100%;
    }
  }
  .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9999;
    .mallbox {
      position: fixed;
      width: 100%;
      max-height: 85%;
      box-sizing: border-box;
      background: #fff;
      z-index: 99999;
      color: #444;
      bottom: 0px;
      left: 0;
      border-radius: 8px;
      .mall_box {
        padding: 0 15px;
        .title {
          position: absolute;
          right: 10px;
          top: -4px;
          .close {
            font-size: 30px;
            padding: 12px 0;
            opacity: 0.7;
          }
        }
        .titles {
          width: 100%;
          overflow: hidden;
          position: relative;
          border-bottom: solid 1px #e0e0e0;
          padding: 8px 0;
          .title_t {
            font-size: 16px;
            text-align: center;
            width: 100%;
            float: left;
            color: #333333;
          }
          .close {
            position: absolute;
            font-size: 34px;
            text-align: right;
            width: 50px;
            right: 0;
            top: -7px;
            font-weight: 400;
          }
        }
        .list {
          width: 100%;
          padding-top: 10px;
          .list-item {
            height: 96px;
            margin: 0 15px;
            margin-bottom: 10px;
            display: flex;
            .detail {
              flex: 1;
              border-radius: 6px 0px 0px 6px;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.17);
              padding: 15px 0;
              display: flex;
              .left {
                width: 35%;
                height: 100%;
                border-right: 1px dashed #ccc;
                .price {
                  font-size: 22px;
                  font-family: "Medium";
                  font-weight: 500;
                  color: rgba(255, 56, 62, 1);
                  text-align: center;
                  line-height: 28px;
                  margin-top: 10px;
                }
                .tip {
                  font-size: 12px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: rgba(102, 102, 102, 1);
                  text-align: center;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 2;
                  overflow: hidden;
                }
              }
              .right {
                flex: 1;
                padding-left: 12px;
                .name {
                  width: 100%;
                  box-sizing: border-box;
                  .type {
                    display: inline-block;
                    padding: 0 6px;
                    height: 18px;
                    line-height: 18px;
                    text-align: center;
                    background: rgba(254, 106, 156, 1);
                    border-radius: 11px;
                    font-size: 8px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                    vertical-align: middle;
                  }
                  .ticket-name {
                    font-size: 12px;
                    font-family: "PingFangSC-Regular";
                    font-weight: 400;
                    color: #333333;
                    line-height: 18px;
                    margin-left: 5px;
                    display: inline-block;
                    vertical-align: middle;
                  }
                }
                .descript {
                  height: 23px;
                  min-width: 140px;
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: #666666;
                  padding-top: 8px;
                  .tip {
                    color: #ff383e;
                  }
                }
                .data {
                  font-size: 10px;
                  font-family: "PingFangSC-Regular";
                  font-weight: 400;
                  color: #666666;
                }
              }
            }
            .status {
              width: 56px;
              height: 100%;
              border-radius: 0px 6px 6px 0;
              background: rgba(254, 106, 156, 1);
              box-shadow: 3px 2px 8px 0px rgba(0, 0, 0, 0.17);
              position: relative;
              .use {
                width: 28px;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 12px;
                font-family: "Medium";
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
                .iconss {
                  width: 46px;
                  height: 46px;
                  position: absolute;
                  right: -9px;
                  top: -19px;
                }
              }
              .miss {
                width: 100%;
                text-align: center;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 12px;
                font-family: "Medium";
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
              }
              &::before {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                position: absolute;
                top: 0;
                left: 0;
                transform: translate(-50%, -50%);
                background: rgba(243, 244, 246, 1);
              }
              &::after {
                content: "";
                display: block;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                left: 0;
                transform: translate(-50%, 50%);
                background: rgba(243, 244, 246, 1);
              }
              .icon {
                height: 100%;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding: 20px 0;
                .circle {
                  width: 8px;
                  height: 8px;
                  border-radius: 50%;
                  background-color: rgba(243, 244, 246, 1);
                }
              }
            }
            &:last-of-type {
              margin-bottom: 50px;
            }
          }
          .mask-used {
            opacity: 0.5;
          }
          .disabled {
            filter: grayscale(1);
          }
        }
        .zhanwei {
          width: 100%;
          height: 60px;
        }
        .mallInfo {
          height: auto;
          display: flex;
          padding-bottom: 10px;
          border-bottom: solid 1px #e0e0e0;
          margin-top: 10px;
          .mallImg {
            width: 95px;
            height: 95px;
            margin-right: 10px;
            display: inline-block;
          }
          .right {
            width: 60%;
            .mall_row1 {
              height: 14px;
              font-size: 17px;
              color: #f64665;
              .rmb_icon {
                width: 12px;
                height: 12px;
              }
              .orange {
                color: #ff7100;
              }
              .money_cent {
                font-size: 11px;
              }
              .monty {
                text-align: left;
                display: inline-block;
                padding: 0 2px;
              }
            }
            .mall_row2 {
              font-size: 12px;
              width: 40%;
              text-decoration: line-through;
              color: #888;
              margin-top: 11px;
            }
            .mall_row4 {
              font-size: 12px;
              width: 40%;
              color: #888;
              margin-top: 6px;
            }
            .none_count {
              color: #ff383e;
            }
            .mall_row3 {
              font-size: 14px;
              color: #444;
              margin-top: 8px;
            }
          }
        }
        .dv {
          clear: both;
          height: auto;
          // margin-bottom: 30px;
          .mall_choose {
            height: 20px;
            display: inline-block;
            font-size: 14px;
            color: #444;
            margin: 10px;
            clear: both;
          }
          .mall_type {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
            clear: both;
            .mall_style {
              float: left;
              width: auto;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              border: 0.5px solid #333333;
              color: #333333;
              margin: 0 10px 10px 0;
              text-align: center;
              padding: 0 25px;
              overflow: hidden;
              box-sizing: border-box;
            }
            .active {
              color: #f64665;
              border: 0.5px solid #f64665;
            }
            .coloring {
              //置灰
              color: #e5e5ea;
              border: 1px solid #e5e5ea;
            }
          }
        }
        .choose {
          height: 28px;
          line-height: 28px;
          clear: both;
          font-size: 14px;
          color: #444;
          margin-bottom: 24px;
          margin-top: 10px;
          position: relative;
          .num {
            width: 105px;
            height: 28px;
            position: absolute;
            right: 0;
            top: 0;
            line-height: 28px;
            text-align: center;
            .numBtn {
              width: 28px;
              height: 28px;
              font-size: 17px;
              color: #888;
              // border: 0.5px solid #ccc;
              display: inline-block;
              vertical-align: middle;
              background: rgba(238, 238, 238, 1);
            }
            .num_mid {
              width: 42px;
              height: 28px;
              font-size: 14px;
              color: #444;
              display: inline-block;
              background: rgba(238, 238, 238, 1);
              vertical-align: middle;
              margin: 0 1px;
            }
            .num_mids {
              background: rgba(251, 251, 251, 1);
            }
          }
        }
      }
      .mall_boxs {
        padding: 0;
      }
      .comfirmBtn {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
        color: #fff;
        background: #ff383e;
        text-align: center;
        font-size: 18px;
      }
      .comfirmBtns {
        width: 100%;
        height: 44px;
        line-height: 44px;
        border-radius: 0;
        color: #fff;
        background: #cccccc;
        text-align: center;
        font-size: 18px;
      }
    }
  }

  .goods-info {
    position: relative;
    width: 100%;
    padding: 15px 10px 0;
    box-sizing: border-box;
    background: #fff;
    color: rgba(68, 68, 68, 1);
    .plus {
      margin: 0 32px;
      padding: 0 10px;
      line-height: 29px;
      font-size: 12px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/Rectangle%2021%403x.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      position: relative;
      .btn {
        padding: 0;
        margin: 0;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        text-decoration: underline;
        font-size: 12px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 17px;
        .btn-share {
          width: 100%;
          height: 100%;
          background: transparent;
          outline: none;
          border: none;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }
      }
    }
    .price {
      width: 100%;
      line-height: 20px;
      margin-right: 15px;
      font-size: 17px;
      font-family: "PingFangSC-Regular";
      .fen-group,
      .rmb-group {
        display: inline-block;
        font-weight: 400;
        color: #ff383e;
        margin-top: 4px;
        position: relative;
        .icon {
          line-height: 12px;
          font-size: 13px;
          text-align: center;
          display: inline-block;
          vertical-align: middle;
        }
        ._money {
          font-size: 20px;
          margin-left: 2px;
        }
        .icon-kou {
          width: auto;
          height: 14px;
          font-size: 10px;
          margin-left: 4px;
          color: #fff;
          display: inline-block;
          background-color: #ffe0e0;
          text-align: center;
          line-height: 14px;
          border-radius: 7px;
          padding: 0 5px;
          margin-bottom: 4px;
          // position: absolute;
          // top: 20%;
          // right: 0;
        }
      }
      .rmb-group_avtive {
        color: #ffffff;
      }
      .and {
        display: inline-block;
        font-size: 15px;
        font-family: "Medium";
        padding: 0;
        color: #fff;
      }
      .tip {
        display: inline-block;
        font-size: 10px;
        font-family: "PingFangSC-Regular";
        margin-left: 4px;
      }
      .to_fx {
        position: relative;
        top: 6px;
        left: 2px;
        display: inline-block;
        width: 62px;
        height: 22px;
        .to_fx_img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .djs_content {
      color: #fff;
      font-size: 14px;
      text-align: center;
      width: 150px;
      position: absolute;
      right: 0;
      bottom: 7px;
      .djs_content_con {
        margin-top: 5px;
        font-size: 14px;
        .bord {
          border: solid 1px rgba(255, 255, 255, 0.5);
          display: inline-block;
          width: 19px;
          height: 19px;
          border-radius: 4px;
        }
        .time_style {
          display: inline-block;
          padding: 0 3px;
        }
      }
    }
    .old-price {
      margin-top: 8px;
      padding-bottom: 10px;
      color: #ffffff;
      opacity: 0.7;
      .old {
        float: left;
        font-size: 12px;
        font-family: "Regular";
        text-decoration: line-through;
      }
      .sales {
        float: left;
        width: 70px;
        font-size: 12px;
        font-family: "Regular";
        margin-left: 14px;
      }
    }
    .old-price1 {
      margin-top: 8px;
      padding-bottom: 10px;
      color: #666666;
      opacity: 0.7;
      .old {
        float: left;
        font-size: 12px;
        font-family: "Regular";
        text-decoration: line-through;
      }
      .sales {
        float: right;
        width: 70px;
        font-size: 12px;
        font-family: "Regular";
        text-align: right;
        padding-right: 6px;
      }
    }
  }
  .goods-info_avtive {
    background: linear-gradient(
      315deg,
      rgba(230, 27, 100, 1) 0%,
      rgba(255, 56, 62, 1) 100%
    );
  }
  .goods-name {
    font-size: 17px;
    font-family: "Medium";
    padding: 2px 4px;
    width: 96%;
    margin: 0 auto;
    margin-top: 8px;
    background-color: #fff;
    display: inline-block;
    vertical-align: middle;
    .cross-border {
      width: 58px;
      height: 21px;
      border-radius: 11px;
      overflow: hidden;
      box-sizing: border-box;
      padding: 1px;
      background-image: -webkit-linear-gradient(
        180deg,
        rgba(255, 217, 129, 1),
        rgba(255, 146, 53, 1)
      );
      background-image: -moz-linear-gradient(
        180deg,
        rgba(255, 217, 129, 1),
        rgba(255, 146, 53, 1)
      );
      background-image: linear-gradient(
        180deg,
        rgba(255, 217, 129, 1),
        rgba(255, 146, 53, 1)
      );
      display: inline-block;
      vertical-align: middle;
      .box {
        width: 100%;
        height: 100%;
        border-radius: 11px;
        background: #fff;
        .msg {
          font-size: 12px;
          line-height: 21px;
          text-align: center;
          font-family: "PingFangSC-Regular";
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          background: linear-gradient(
            180deg,
            rgba(255, 148, 56, 1) 0%,
            rgba(216, 216, 216, 1) 100%
          );
          -webkit-text-fill-color: transparent;
          -webkit-background-clip: text;
        }
      }
    }
  }
  .goods-description {
    background-color: #fff;
    width: 96%;
    margin: 0 auto;
    font-size: 14px;
    font-family: "Regular";
    // margin-bottom: 5px;
    padding: 5px 0;
  }
  .label {
    background-color: #fff;
    border-top: solid 1px #fafafa;
    // margin-top: 10px;
    // height: 44px;
    line-height: 44px;
    position: relative;
    padding-left: 15px;
    font-size: 14px;
    color: rgba(136, 136, 136, 1);
    .label_list {
      // padding:9px 0;
      .label_item {
        float: left;
        width: auto;
        margin-right: 10px;
        line-height: 30px;
        .img {
          width: 14px;
          height: 14px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  .ticket-list {
    width: 100%;
    height: 45px;
    background-color: #fff;
    margin-top: 10px;
    position: relative;
    padding-left: 45px;
    .tip {
      width: 20px;
      height: 20px;
      border-radius: 3px;
      line-height: 20px;
      text-align: center;
      background-color: #ff98aa;
      color: #fff;
      font-size: 14px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
    .selection {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(68, 68, 68, 1);
      float: left;
      margin-left: 10px;
    }
    .icon {
      width: 24px;
      display: block;
      float: right;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
    .ticket-item {
      line-height: 25px;
      text-align: center;
      border-radius: 2px;
      float: left;
      margin-right: 10px;
      margin-top: 10px;
      overflow: hidden;
      .mask-item {
        padding: 0 10px;
        height: 100%;
      }
    }
    .ticket-rmb {
      position: relative;
      color: rgba(255, 152, 170, 1);
      .mask-item {
        border: 1px solid rgba(255, 152, 170, 1);
        &::before,
        &::after {
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #fff;
        }
        &::before {
          border: 1px solid rgba(255, 152, 170, 1);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        &::after {
          border: 1px solid rgba(255, 152, 170, 1);
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(50%, -50%);
        }
      }
    }
    .ticket-integral {
      position: relative;
      color: rgba(255, 113, 0, 1);
      .mask-item {
        border: 1px solid rgba(255, 113, 0, 1);
        &::before,
        &::after {
          content: "";
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background-color: #fff;
        }
        &::before {
          border: 1px solid rgba(255, 113, 0, 1);
          position: absolute;
          left: 0;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        &::after {
          border: 1px solid rgba(255, 113, 0, 1);
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(50%, -50%);
        }
      }
    }
  }
  .cxtq {
    width: 100%;
    overflow: hidden;
    .cxtq_img {
      width: 100%;
      height: 60px;
    }
  }
  .specification {
    width: 100%;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    line-height: 48px;
    padding-left: 15px;
    margin-top: 10px;
    box-sizing: border-box;
    position: relative;
    .tip {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(136, 136, 136, 1);
      float: left;
    }
    .tips {
      width: 22px;
      height: 22px;
      border-radius: 2px;
      line-height: 20px;
      text-align: center;
      background-color: #ff98aa;
      color: #fff;
      font-size: 13px;
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
    .selection {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(68, 68, 68, 1);
      float: left;
      margin-left: 10px;
      width: 70%;
      height: 45px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .selections {
      font-size: 14px;
      font-family: "Regular";
      color: rgba(68, 68, 68, 1);
      float: left;
      margin-left: 30px;
    }
    .icon {
      width: 24px;
      display: block;
      float: right;
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
  .shop-style {
    border: solid 1px red;
    width: 100%;
    height: 48px;
    position: absolute;
    bottom: -10px;
    opacity: 0;
  }
  .evaluation {
    width: 100%;
    background-color: #fff;
    margin-top: 10px;
    .header {
      height: 48px;
      line-height: 48px;
      width: 100%;
      padding: 0 15px;
      box-sizing: border-box;
      .left {
        float: left;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(68, 68, 68, 1);
      }
      .right {
        float: right;
        font-size: 14px;
        font-family: "Regular";
        color: rgba(246, 70, 101, 1);
        .icon {
          display: inline-block;
          width: 23px;
          vertical-align: middle;
        }
      }
    }
  }
  .goods-detail {
    display: block;
    width: 100%;
    box-sizing: border-box;
    .header {
      height: 48px;
      line-height: 48px;
      width: 100%;
      background-color: #fff;
      box-sizing: border-box;
      .left {
        text-align: center;
        font-size: 12px;
        font-family: "Regular";
        color: rgba(68, 68, 68, 1);
        background: #f2f2f2;
      }
    }
    .imgsbox {
      margin-bottom: 50px;
      .imgs {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  .go_home {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 70px;
    right: 10px;
  }
  .btn-group {
    z-index: 9999;
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    background-color: #fff;
    display: flex;
    .left {
      width: 155px;
    }
    .right {
      flex: 1;
    }
    .left {
      height: 100%;
      display: flex;
      box-shadow: 0 -1px 6px 1px rgba(0, 0, 0, 0.04);
      .call,
      .shop-car {
        flex: 1;
        position: relative;
        .image {
          width: 20px;
          height: 20px;
          display: block;
          margin: 8px auto 2px;
        }
        .msg {
          width: 100%;
          text-align: center;
          font-size: 12px;
          font-family: "Regular";
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          line-height: 17px;
        }
        .tip {
          width: 24px;
          height: 14px;
          line-height: 14px;
          text-align: center;
          font-size: 10px;
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          background: rgba(255, 73, 73, 1);
          border-radius: 7px;
          border: 1px solid rgba(255, 255, 255, 1);
          position: absolute;
          top: 6px;
          right: 18px;
        }
        .mall_num {
          width: 23px;
          height: 12px;
          line-height: 12px;
          border-radius: 7px;
          background-color: #ff4949;
          color: #fff;
          position: absolute;
          top: 12%;
          left: 55%;
          text-align: center;
          font-size: 10px;
        }
        .contact {
          display: block;
          padding: 0;
          margin: 0;
          outline: none;
          width: 100%;
          height: 100%;
          position: absolute;
          opacity: 0;
          z-index: 10;
          top: 0;
          left: 0;
        }
        .userinfo-btn {
          position: relative;
          bottom: 45px;
          left: 0px;
          height: 50px;
          opacity: 0;
        }
      }
    }
    .right {
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #ffa837;
      box-shadow: 0 -1px 6px 1px rgba(255, 152, 170, 0.08);
      font-size: 14px;
      font-family: "Regular";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      padding: 0;
      border-radius: 0;
    }
    .right1 {
      background-color: #ff383e;
    }
    button::after {
      border-radius: 0;
      border: none;
    }
  }
  //   分享
  .share-mask {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    .share-top {
      width: 100%;
      display: block;
    }
    .share-model {
      width: 240px;
      margin: 20px auto 0;
      .poster {
        width: 100%;
        display: block;
      }
    }
  }
}
</style>
